<!-- 历史记录 -->
<template>
	<view class="wrap" :style="{'height': 'calc(100vh - '+(navBarHeight + 'px')+')'}">
		<u-navbar title="搜索内容" :autoBack="false"  @leftClick="toHomeFun"></u-navbar>
		<view class="content" v-if="dataList.length">
			<view class="list" v-for="(item,index) in dataList" :key="index" @click="toInfoFun(item)">
				<view class="list_left">
					<view class="list_left_img">
						<image :src="item.data_image" mode="aspectFill"></image>
					</view>
					<view class="list_left_info">
						<view class="list_left_title line1">
							{{item.name}}
						</view>
						<!-- <view class="list_left_time">
							<view class="list_left_time_text line1">
								条码编号：{{item.code}}
							</view>
						</view> -->
					</view>
				</view>
				<view class="list_right" v-if="item.grade">
					<view class="list_right_text" >
						<view class="list_right_spot">
							含
							<!-- <image src="https://jichacha-bt-bak.oss-cn-shenzhen.aliyuncs.com/wxxcx/static/images/details-5.png"></image> -->
						</view>
						<view class="list_right_rank" :class="item.grade=='B'?'b_color':item.grade=='B-'?'b1_color':item.grade=='A'?'a_color':item.grade=='C'?'c_color':item.grade=='D'?'d_color':''">
							{{item.grade || '暂无等'}}级
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="content" v-else style="text-align: center;padding: 50rpx 0;">
			暂无数据
		</view>
	</view>
</template>

<script>
	import { getGoodsDetail,getGoodsList} from '@/api/api'
	export default {
		data() {
			return {
				navBarHeight:'',
				query: {
					page: 1,
					limit: 10
				},
				dataList: [],
				bottomMain: false,
				value:''
			};
		},
		onLoad(opition) {
			let that = this;
			uni.getSystemInfo({
			    success: function (res) {
					that.navBarHeight = res.windowTop 
			    }
			});
			if(opition.value){
				this.value = opition.value
			}
		},
		onShow(){
			this.query = {
				page: 1,
				limit: 10
			}
			this.bottomMain = false
			this.dataList = []
			this.getListFun();
		},
		onReachBottom() {
			if (!this.bottomMain) {
				this.query.page += 1;
				this.getListFun();
			}
		},
		onBackPress() {
			return uni.reLaunch({
				url:'/pages/tabbar/index'
			})
		},
		methods: {
			toHomeFun(){
				uni.reLaunch({
					url:'/pages/tabbar/index'
				})
			},
			setGradeFun(value){
				if(value > 50){
					if(value > 70){
						if(value > 85){
							return 'A'
						}else{
							return 'B'
						}
					}else{
						return 'C'
					}
				}else{
					return 'D'
				}
			},
			toInfoFun(item){
				if(!this.show){
					uni.showLoading({
						title: '获取中'
					})
					getGoodsDetail({
						gcode:item.code
					}).then((res)=>{
						uni.hideLoading();
						const { data } = res
						let calorie_num = parseFloat(data.info.calorie_num)
						let sugar_num = parseFloat(data.info.sugar_num)
						data.stage_list.calorie.forEach((item,index)=>{
							if(calorie_num >item){
								if(index == data.stage_list.calorie.length - 1 || calorie_num <= data.stage_list.calorie[index+1]){
									console.log(item)
									data.info.calorie_index = index+1
								}
							}
						})
						data.stage_list.sugar.forEach((item,index)=>{
							if(sugar_num >item){
								if(index == data.stage_list.sugar.length - 1 || sugar_num <= data.stage_list.sugar[index+1]){
									data.info.sugar_index = index+1
								}
							}
						})
						uni.setStorageSync('RetData',data)
						return uni.navigateTo({
							url:"/pages/scans/ScanResult"
						})
					}).catch((e) => {
						uni.hideLoading();
						uni.$u.toast(typeof  e ===  'string'?e:'请检查网络连接');
					})
				}
			},
			getListFun() {
				const that = this
				uni.showLoading({
					title: '获取中'
				});
				getGoodsList({
					page: this.query.page,
					keywords:this.value,
					limit:this.query.limit
				}).then((res) => {
					uni.hideLoading();
					if (that.query.page == 1) {
						that.dataList = res.data;
					} else {
						that.dataList.push(...res.data);
					}
					if (res.data.length != 10) {
						that.bottomMain = true
					}
				}).catch((e)=>{
					uni.hideLoading();
					uni.$u.toast(typeof  e ===  'string'?e:'请检查网络连接');
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.line1{
		white-space: nowrap;
		overflow: hidden;//文本超出隐藏
		text-overflow: ellipsis;//文本超出省略号替代
	}
	.d_color {
		color: #ee3a3a !important;
	}
	
	.d_bg {
		background: #ee3a3a !important;
	}
	
	.d_border {
		border: 1rpx solid #ee3a3a;
	}
	
	
	.c_color {
		color: #FEC817 !important;
	}
	
	.c_bg {
		background: #FEC817 !important;
	}
	
	.c_border {
		border: 1rpx solid #FEC817 !important;
	}
	
	.b1_color {
		color: #6AA300 !important;
	}
	
	.b1_bg {
		background: #6AA300 !important;
	}
	
	.b1_border {
		border: 1rpx solid #6AA300 !important;
	}
	
	.b_color {
		color: #00CC70 !important;
	}
	
	.b_bg {
		background: #00CC70 !important;
	}
	
	.b_border {
		border: 1rpx solid #00CC70 !important;
	}
	
	.a_color {
		color: #30C285 !important;
	}
	
	.a_bg {
		background: #30C285 !important;
	}
	
	.a_border {
		border: 1rpx solid #30C285 !important;
	}
	.wrap{
		width: 750rpx;
		background: #f6f7fb;
		padding-top:150rpx;
		.content{
			width: 750rpx;
			height: auto;
			background: #f6f7fb;
			padding: 16rpx 0 40rpx;
			.list{
				margin: 0 20rpx 16rpx;
				width: 660rpx;
				background: #ffffff;
				border-radius: 12rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 16rpx 34rpx 30rpx 16rpx;
				.list_left{
					display: flex;
					align-items: center;
					.list_left_img{
						width: 131rpx;
						height: 131rpx;
						border-radius: 10rpx;
						overflow: hidden;
						image{
							width: 100%;
							height: 100%;
						}
					}
					.list_left_info{
						margin-left: 22rpx;
						width: 360rpx;
						.list_left_title{
							font-size: 34rpx;
							font-weight: bold;
							color: #434242;
						}
						.list_left_time{
							margin-top: 32rpx;
							.list_left_time_text{
								font-size: 24rpx;
								color: #434242;
							}
						}
					}
				}
				.list_right{
					display: flex;
					align-items: center;
					justify-content: center;
					flex-direction: column;
					.list_right_num{
						font-size: 40rpx;
						font-family: DIN, DIN-Bold;
						font-weight: 700;
						text-align: left;
						color: #ee3a3a;
						margin-bottom: 10rpx;
					}
					.list_right_text{
						margin-top: 5rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						.list_right_spot{
							width: 40rpx;
							height: 40rpx;
							background: white;
							border-radius: 50%;
							line-height: 40rpx;
							color: #AFAFAF;
							font-size: 22rpx;
							font-weight: 400;
							text-align: center;
							position: relative;
							image{
								width: 20rpx;
								height: 24rpx;
								position: absolute;
								left: calc(50% - 10rpx);
								top: calc(50% - 12rpx);
							}
						}
						.list_right_rank{
							margin-left: 10rpx;
							font-size: 36rpx;
							font-weight: 700;
							color: #737373;
							width: 84rpx;
							text-align: left;
						}
					}
					.del{
						width: 40rpx;
						height: 40rpx;
						margin-top: 30rpx;
						image{
							width: 100%;
							height: 100%;
							display: inline-block;
							vertical-align: top;
						}
					}
				}
			}
		}
		
	}
</style>
